﻿// +----------------------------------------------------------------------
// | ZYSOFT [ MAKE IT OPEN ]
// +----------------------------------------------------------------------
// | Copyright (c) 20015 NJPT All rights reserved.
// +----------------------------------------------------------------------
// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
// +----------------------------------------------------------------------
// | Author: zy_cwind <391321232@qq.com>
// +----------------------------------------------------------------------

/**
 * 构造函数
 * 转盘的半径根据 canvas 自动调整
 *
 * @param d 初始化参数
 *        d.color 栏目文字颜色
 *        d.font 栏目字体
 *        d.p 指针图片
 *        d.background 背景图片
 *        d.items 指统计的项目数
 *        d.speed 转动的速度
 *        d.padding 绘制原盘时的边距
 *
 */
Pie = function(d) {
    // 绘制参数
    this.mContext= d.canvas.getContext("2d");
    this.mRadius = Math.min(d.canvas.width,d.canvas.height) / 2;
    this.mLength = d.items.length;
    this.mItems  = d.items;
    this.mPadding= d.padding || 0;
    this.mColor  = d.color || "#F00";
    this.mFont   = d.font  || "16px sans-serif";
    this.mT      = 0;

    // 运动参数
    this.mAngle = 0;
    this.mState = 0;
    this.mIndex = 0;
    this.mN     = 0;
    // 状态回调
}

/**
 * 转盘色表
 *
 */
Pie.glColor  = ["#e0483d", "#7498e6","#f8931d", "#21c064","#e0483d", "#7498e6","#f8931d", "#21c064"];


/**
 * 设置结果
 * 在获取到服务器返回的结果时设置
 *
 * @param index 转盘上栏目的序号
 * @param thiz 调用者指针，回调时会修改 this 指针为调用者
 * @param listener 回调函数无参数
 *
 */
Pie.prototype.resp =function(index, thiz, listener) {
    if (this.mState ==1) {
        this.mIndex = index;
        this.mOnFinish= {"t" :thiz, "l" : listener};
        this.mState = 2;
    }
}

/**
 * 画当前饼图
 *
 */

//扇形
Pie.prototype.sector = function (x, y, radius, sDeg, eDeg,color) {
// 初始保存
this.mContext.save();
// 位移到目标点
this.mContext.translate(x, y);
this.mContext.beginPath();
// 画出圆弧

this.mContext.arc(0,0,radius,sDeg, eDeg);

// 再次保存以备旋转
this.mContext.save();
// 旋转至起始角度
this.mContext.rotate(eDeg);
// 移动到终点，准备连接终点与圆心
this.mContext.moveTo(radius,0);
// 连接到圆心
this.mContext.lineTo(0,0);
// 还原
this.mContext.restore();
// 旋转至起点角度
this.mContext.rotate(sDeg);
// 从圆心连接到起点

this.mContext.lineTo(radius,0);
this.mContext.closePath();
// 还原到最初保存的状态
this.mContext.fillStyle=color;//填充颜色,默认是黑色
this.mContext.fill();//画实心圆

this.mContext.restore();
return this.mContext;
}


Pie.prototype.drawPie =function() {

      var fontxArray=new Array();
      var fontyArray=new Array();
        //画一个实心圆

         var sum=-5;
         for(var i =0;i<this.mLength;i++)
         { 
           this.sector(100,this.mRadius,this.mRadius ,sum/100*Math.PI*2,(sum+this.mItems[i].pecentage)/100*Math.PI*2,Pie.glColor[i]);
          
           var fontx = this.mRadius*2/3*Math.cos((sum+this.mItems[i].pecentage/2)/100*Math.PI*2)+100;
           var fonty = this.mRadius+this.mRadius*2/3*Math.sin((sum+this.mItems[i].pecentage/2)/100*Math.PI*2);
           fontxArray.push(fontx+1);
           fontyArray.push(fonty+4); 
           sum +=this.mItems[i].pecentage;
         }       
        this.sector(100,this.mRadius,this.mRadius/2,0,Math.PI*2,"#f0f0f0");

        this.mContext.font="12px Georgia";
        this.mContext.fillStyle="white";
        this.mContext.textAlign="center";
        for(var i=0;i<this.mLength;i++)
        this.mContext.fillText(this.mItems[i].pecentage+"%",fontxArray[i],fontyArray[i]);
   
       this.drawPieInstruction();
}

Pie.prototype.drawPieInstruction=function(){




         for(var i=0;i<this.mLength;i++)
         {
             this.mContext.fillStyle=Pie.glColor[i];
             this.mContext.fillRect(200,this.mRadius+50-35*i,20,20); 
             this.mContext.font="12px Arial";
             this.mContext.fillStyle="black";
              this.mContext.fillText(this.mItems[i].name,250,this.mRadius+64-35*i);
         }
    
}

/**
 * 请求未完成时匀速转动，否则匀速到目标项目，速度递减至0，转动1圈
 *
 */
Pie.prototype.step =function() {
    switch( this.mState) {
    case 2:
    {
        var t =(this.mIndex- 0.5)  * 360 /this.mDiv;
        if( Math.abs((parseInt(this.mAngle*180/Math.PI) % 360) - (t < 0? t +360 :  t))*Math.PI/180<=this.mSpeed) {
            this.mState  =3;
            break;
        }
    }
    case 1:
        // 旋转
        this.mAngle+=this.mSpeed;
        this.mT=++this.mT%9;
        break;
    case 3:
        // 减速;
        if (this.mN <4*Math.PI/this.mSpeed) {
            this.mAngle+= this.mSpeed - this.mN++ * this.mSpeed* this.mSpeed/ (4* Math.PI  - this.mSpeed);
            this.mT++;
            this.mT%=9;
        } else {
            this.mState  =0;
            this.mN =0;
            this.mOnFinish.l.call(this.mOnFinish.t);
        }
        break;
    }
    this.draw();
}
